<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>适配</title>
    <style>
        <!--
        /**
        固定高度布局：高度固定，宽度使用%；多用box-size:
        */
        -->
        *{
            margin: 0;
            padding: 0;
        }
        #header{
            width: 100%;
            box-sizing: border-box;
            border:1px solid red;
            overflow: hidden;
        }
        #header div{
            width: 20%;
            box-sizing: border-box;
            height: 100px;
            border: 1px solid #ccc;
            float: left;
        }
        #con{
            width: 100%;
            overflow: hidden;
        }
        #con div{
            float: left;

        }
        #con div:nth-child(1){
            width: 80%;
            height: 400px;
            background: blue    ;
        }
        #con div:nth-child(2){
            width: 20%;
            height:400px;
            border:1px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="header">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
<div id="con">
    <div>11</div>
    <div>22</div>
</div>
</body>
</html>